<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-directive</title>
  <script src="../assets/js/vue.js"></script>
</head>
<body>
  <h1>v-directive自定义指令</h1>
  <hr>
  <div id="app">
    <div v-jspang="color">{{ num }}</div>
    <button @click="add">add</button>
  <!-- <button @click="unbind">解绑</button> -->
  </div>
  <!-- 在#app内是拿不到app实例的，因为还未完全加载完成，所以在#app外面是可以的 -->
  <!-- <button onclick="app.$destroy();">解绑</button> -->
  <button onclick="unbind()">解绑</button>
  <script>
    function unbind() { 
      // 使用app的$destroy()方法进行解绑
      app.$destroy();
    };
    Vue.directive('jspang', {
      bind: function (el, bind) { 
        el.style = `color: ${bind.value}`;
        console.log(1, '初始化绑定时调用一次，用于初始化bind');
      },
      inserted: function () {
        console.log(2, '绑定到节点时inserted');
      },
      update: function () { 
        console.log(3, '更新时update');
      },
      componentUpdated: function() {
        console.log(4, '更新完成时componentUpdated');
      },
      unbind: function () { 
        console.log(5, '解绑时调用一次unbind');
      }
    })
    var app = new Vue({
      el: '#app',
      data: {
        num: 10,
        color:'red'
      },
      methods: {
        add: function () { 
          this.num++;
        },
        // unbind: function() {
        //   app.$destroy();
        // }
      }
    });
  </script>
</body>
</html>